<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>年级</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="student in students" :key="student.id">
        <td>{{ student.id }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.gender }}</td>
        <td>{{ student.grade }}</td>
        <td>
          <button @click="editStudent(student)">编辑</button>
          <button @click="deleteStudent(student.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: ['students'],
  emits: ['edit', 'delete'],
  methods: {
    editStudent(student) {
      this.$emit('edit', student);
    },
    deleteStudent(id) {
      this.$emit('delete', id);
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
button {
  margin-right: 5px;
}
</style>